<template>
	<view>
		<u-sticky :enable="enable">
			<view class="steps">
				<u-steps :list="numList" :current="0" mode="number" active-color="white" un-active-color="white">
				</u-steps>
			</view>
		</u-sticky>
		<view class="container">
			<u-form :model="form" ref="uForm" :label-width="180">
				<u-form-item label="商品类型">
					<view class="from-right">
						<u-button type="primary" size="mini">{{PRODUCTTYPE[form.productType]}}</u-button>
					</view>
				</u-form-item>
				<u-form-item label="商家">
					<view class="from-right">
						{{merShortName}}
					</view>
				</u-form-item>
				<u-form-item label="商品类目" required>
					<u-input placeholder="请选择商品类目" v-model="categoryName" type="select" @click="categoryShow = true;" />
				</u-form-item>
				<u-form-item label="商品品牌" required>
					<u-input placeholder="请选择商品品牌" v-model="brandName" type="select" @click="selectBrand()" />
				</u-form-item>
				<u-form-item label="商品名称" required>
					<u-input placeholder="请输入商品名称" v-model="form.productName" clearable />
				</u-form-item>
				<u-form-item label="副标题" required>
					<u-input placeholder="请输入商品副标题" v-model="form.productTitle" clearable />
				</u-form-item>
				<u-form-item label="过期时间">
					<view class="from-right">
						<u-number-box v-model="form.expireTime" :min="30" input-width="160" input-height="70"></u-number-box>
						<text style="margin-left:10rpx;">分钟</text>
					</view>
				</u-form-item>
				<u-form-item label="兑换须知">
					<view style="display: flex;flex-direction: column;">
						<u-input placeholder="请输入兑换须知" v-model="form.productDesc" border height="140" type="textarea" />
						<view style="font-size: 24rpx;color: red;">*此处需填：下单付款后的发货时间、不发货地区、不包邮地区等买家需要注意的购买事项</view>
					</view>
				</u-form-item>
				<u-form-item label="销售价格" required>
					<u-input placeholder="请输入销售价格" v-model="form.productSalePrice" clearable
						@input="deductRateChange" />
				</u-form-item>
				<u-form-item label="糖果抵扣率" v-show="form.productSalePrice">
					<view style="width: 100%;">
						<view style="margin: 20rpx 0;display: flex;align-items: center;">
							<view style="flex:1;margin-right: 30rpx;">
								<u-slider v-model="form.sweetDeductRate" step="1" :max="max" @moving="sweetDeductRateChange">
								</u-slider>
							</view>
							<view style="flex:1">
								<u-number-box v-model="form.sweetDeductRate" :max="max" input-width="80"
									input-height="70" @change="sweetDeductRateChange"></u-number-box>
							</view>
						</view>
						<view style="margin-top: 30rpx;font-size: 26rpx;">当天实时参考价格: <text
								style="color: red;">¥{{salePrice}} + {{saleSweet}}</text>个糖果</view>
					</view>
				</u-form-item>
				<u-form-item label="使用优惠券">
					<u-radio-group v-model="form.isUseCoupon">
						<u-radio name="true">是</u-radio>
						<u-radio name="false">否</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="使用金豆抵扣" label-width="200rpx">
					<view class="">
						<u-radio-group v-model="form.goldenBeansStatus">
							<u-radio name="1">是</u-radio>
							<u-radio name="0">否</u-radio>
						</u-radio-group>
						<view v-if="form.goldenBeansStatus == 1">
							<view class="">实时金豆参考价格: <text style="color: red;">￥{{goldenBeanPrice}}</text>/个</view>
							<view style="margin-top: -10rpx;">购买商品须抵扣: <text style="color: red;">{{goldNumber}}</text>个金豆</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="成本价格">
					<u-input placeholder="请输入成本价格" v-model="form.productCostPrice" clearable />
				</u-form-item>
				<u-form-item label="预警数量">
					<u-input placeholder="请输入预警数量" v-model="form.warnUnit" clearable />
				</u-form-item>
				<u-form-item label="重量(kg)">
					<view class="from-right">
						<u-number-box v-model="form.productWeight" input-width="160" input-height="70"></u-number-box>
					</view>
				</u-form-item>

				<u-form-item label="配送方式">
					<u-checkbox-group active-color="#357cd4">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in radiolist"
							:key="index" :name="item.name">
							{{item.name}}
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="运费模板" v-if="form.isDeliveryExpressEnabled">
					<u-input placeholder="请选择运费模板" v-model="transName" type="select" @click="freightShow = true;" />
				</u-form-item>
			</u-form>
			<view style="margin: 60rpx 0 80rpx 0;">
				<u-button type="primary" class="btn" @click="submit()">保存</u-button>
			</view>
			<!-- 类目 -->
			<u-select v-model="categoryShow" :list="categorylist" mode="mutil-column-auto" value-name="id"
				label-name="name" child-name="childList" @confirm="categoryConfirm"></u-select>
			<!-- 运费模板 -->
			<u-select v-model="freightShow" :list="freightlist" value-name="transportId" label-name="transName"
				@confirm="freightConfirm"></u-select>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				categoryShow: false,
				freightShow: false,
				numList: [{
					name: '基本信息'
				}, {
					name: '商品图片'
				}, {
					name: '商品参数'
				}, {
					name: '规格库存'
				}],
				form: {
					productType: 1, //商品类型
					mid: uni.getStorageSync('mid'), //商家
					productCategoryId: '', //商品类目
					productBrandId: '', //商品品牌
					productName: '', //商品名称
					productTitle: '', //副标题
					expireTime: 30, //商品订单过期时间(单位:分钟)
					productDesc: '', //兑换须知
					productSalePrice: '', //商品销售价
					productCostPrice: '', //商品成本价
					warnUnit: '', //预警数量
					productWeight: 0, //商品重量
					isDeliveryExpressEnabled: false, //快递配送
					isDeliveryPickEnabled: false, //到店自提
					productFreightId: '', //运费模板id
					sweetDeductRate: 0, //糖果抵扣率
					type: 0,
					isUseCoupon: 'false', // 是否使用优惠券
					goldenBeansStatus: '0', // 是否使用金豆抵扣
				},
				categoryName: '',
				merShortName: uni.getStorageSync('merShortName'),
				PRODUCTTYPE: {
					1: '实物商品',
					2: '虚拟商品'
				},
				radiolist: [{
						name: '快递配送',
						checked: false,
					},
					{
						name: '门店自提',
						checked: false,
					}
				],
				categorylist: [], //类目数据
				brandlist: [], //品牌数据
				freightlist: [], //运费模板数据
				transName: '',
				max: 0,
				saleSweet: 0,
				salePrice: 0,
				brandName: '',
				goldenBeanPrice: 0,// 金豆当前实时价格
				goldNumber: 0, // 金豆抵扣数
			}
		},
		onShow() {
			this.enable = true;
		},
		onHide() {
			this.enable = false;
		},
		onLoad(option) {
			this.getDeductRate();
			this.getCategory();
			this.getShipping();
			if (option.id) {
				this.getGoodsDetail(option.id);
			}
		},
		methods: {
			//计算金豆当天实时参考价格
			jindouRateChange() {
			  if (this.form.productSalePrice) {
				  this.$u.api.getGoldenBeanPrice({
				  	price: this.form.productSalePrice
				  }).then(res => {
					this.goldenBeanPrice = res.data.goldenBeanPrice || 0;
					this.goldNumber = res.data.number || 0;
				})
			  }
			},
			//商户后台获取商品详情
			getGoodsDetail(id) {
				this.$u.api.GoodsDetail({
					id: id
				}).then(res => {
					if (res.code == 0) {
						let goodsinfo = res.data;
						this.form = {
							productType: goodsinfo.productType, //商品类型
							mid: goodsinfo.mid, //商家
							productCategoryId: goodsinfo.productCategoryId, //商品类目
							productBrandId: goodsinfo.productBrandId, //商品品牌
							productName: goodsinfo.productName, //商品名称
							productTitle: goodsinfo.productTitle, //副标题
							expireTime: goodsinfo.expireTime, //商品订单过期时间(单位:分钟)
							productDesc: goodsinfo.productDesc, //兑换须知
							productSalePrice: goodsinfo.productSalePrice, //商品销售价
							productCostPrice: goodsinfo.productCostPrice, //商品成本价
							warnUnit: goodsinfo.warnUnit, //预警数量
							productWeight: goodsinfo.productWeight, //商品重量
							isDeliveryExpressEnabled: goodsinfo.isDeliveryExpressEnabled, //快递配送
							isDeliveryPickEnabled: goodsinfo.isDeliveryPickEnabled, //到店自提
							productFreightId: goodsinfo.productFreightId, //运费模板id
							sweetDeductRate: goodsinfo.sweetDeductRate, //糖果抵扣率
							type: goodsinfo.type,
							id: goodsinfo.id,
							isUseCoupon: '' + goodsinfo.isUseCoupon,
							goldenBeansStatus: '' +goodsinfo.goldenBeansStatus
						};
						this.jindouRateChange();
						this.categoryName = goodsinfo.productCategoryName;
						this.brandName = goodsinfo.productBrandName;
						this.radiolist[0].checked = goodsinfo.isDeliveryExpressEnabled;
						this.radiolist[1].checked = goodsinfo.isDeliveryPickEnabled;
						this.transName = goodsinfo.productFreightName;
						this.saleSweet = goodsinfo.saleSweet;
						this.salePrice = goodsinfo.salePrice;
						
					}
				})
			},
			//获取类目数据
			getCategory() {
				this.$u.api.category().then(res => {
					if (res.code == 0) {
						this.categorylist = this.getTreeData(res.data);
					}
				})
			},
			getTreeData(data) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].childList.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].childList = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].childList);
					}
				}
				return data;
			},
			categoryConfirm(e) {
				let categoryNameArr = [];
				let categoryIdArr = [];
				e.forEach((item, index) => {
					categoryIdArr.push(item.value);
					categoryNameArr.push(item.label);

				});
				this.form.productCategoryId = categoryIdArr[categoryIdArr.length - 1];
				this.categoryName = categoryNameArr.join('/');
			},
			checkboxChange(e) {
				if (e.name == '快递配送') {
					this.form.isDeliveryExpressEnabled = e.value
				} else {
					this.form.isDeliveryPickEnabled = e.value
				}
			},
			//获取运费模版
			getShipping() {
				this.$u.api.transport({
					productId: uni.getStorageSync('mid'),
				}).then(res => {
					if (res.code == 0) {
						this.freightlist = res.data;
					}
				});
			},
			freightConfirm(e) {
				this.form.productFreightId = e[0].value;
				this.transName = e[0].label;
			},
			getDeductRate() {
				this.$u.api.deductRate().then(res => {
					if (res.code == 0) {
						this.max = res.data;
					}
				})
			},
			// 
			deductRateChange() {
				this.sweetDeductRateChange();
				this.jindouRateChange()
			},
			//计算返回商品当天实时参考价格
			sweetDeductRateChange() {
				if (this.form.productSalePrice && this.form.sweetDeductRate >= 0) {
					this.$u.api.calculate({
						productSalePrice: this.form.productSalePrice,
						sweetDeductRate: this.form.sweetDeductRate,
					}).then(res => {
						if (res.code == 0) {
							this.saleSweet = res.data.saleSweet;
							this.salePrice = res.data.salePrice;
						} else {
							this.cankaoPrice = {};
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: true
							});
						}
					})
				}
			},
			selectBrand() {
				uni.navigateTo({
					url: '/pages/line/shoping/brand',
					animationType: "slide-in-right"
				})
			},
			submit() {
				var _this = this;
				if (_this.form.id) {
					_this.$u.api.updateProduct(_this.form).then(res => {
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '商品基本信息保存成功'
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/line/shoping/addGoodsImg?product_id=' + _this.form.id,
									animationType: "slide-in-right"
								});
							}, 2000)
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					})

				} else {
					_this.$u.api.addproduct(_this.form).then(res => {
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '商品基本信息保存成功'
							});
							_this.form.id = res.data
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/line/shoping/addGoodsImg?product_id=' + _this.form.id,
									animationType: "slide-in-right"
								})
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.steps {
		background-color: #357cd4;
		padding: 30rpx;
	}

	.container {
		padding: 30rpx;

		.from-right {
			text-align: right;
			width: 100%;
		}
	}
	/deep/ .u-select__header{
		font-size: 32rpx;
	}
	.btn {
		background: #1F6ECF;
		box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
		border-radius: 43rpx;
	}
</style>
